/* Styling skeleton loading */

.skeleton-placeholder__line-sm {
  @apply rounded-full bg-gray-50;
  height: 0.625rem;
}

.skeleton-placeholder__line-md {
  @apply rounded-full bg-gray-50;
  height: 1rem;
}
.skeleton-placeholder__line-lg {
  @apply rounded-full bg-gray-50;
  height: 1.5rem;
}

.skeleton-placeholder__image {
  @apply mt-5 h-48 rounded-lg bg-gray-50;
}

.skeleton-placeholder__date {
  @apply rounded-lg bg-gray-200 w-10 h-10;
}

.skeleton-animate {
  animation: skeletonShimmer 3s infinite linear;
  background: linear-gradient(
    to right,
    theme("colors.gray.100"),
    theme("colors.gray.200"),
    theme("colors.gray.100")
  );
  background-size: 1000px 100%;
}

@keyframes skeletonShimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}
